﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>首页</title>
    <link rel="apple-touch-icon" sizes="16x16" href="./images/logo/painting_art.png">
    <link rel="apple-touch-icon" sizes="57x57" href="./images/logo/painting_art.png">
    <link rel="apple-touch-icon" sizes="72x72" href="./images/logo/painting_art.png">
    <link rel="shortcut icon" type="image/png" sizes="16x16" href="./images/logo/painting_art.png">
    <link rel="shortcut icon" type="image/png" sizes="57x57" href="./images/logo/painting_art.png">
    <link rel="shortcut icon" type="image/png" sizes="72x72" href="./images/logo/painting_art.png">
    <link rel="stylesheet" href="css/homePage.css">

    <!--首页横幅----------------------------------------------------------------------------------------------->
    <!--    <link rel="stylesheet" href="../../libs/bootstrap-4.5.0-dist/css/bootstrap.min.css" crossorigin="anonymous">-->
    <link rel="stylesheet" href="libs/dynamic_banner/css/shutter.css">

    <!--导航----------------------------------------------------------------------------------------------->
    <!-- <link rel="stylesheet" href="libs/bootstrap-3.3.7-dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="libs/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="libs/top_nav/css/top_nav.css">
    <link rel="stylesheet" type="text/css" href="libs/top_nav/css/bootsnav.css">
    <style type="text/css">
        .navbar-brand {
            padding: 29px 15px;
            height: auto;
        }

        nav.navbar.bootsnav {
            border: none;
            margin-bottom: 150px;
        }

        .navbar-nav {
            float: left;
        }

        nav.navbar.bootsnav ul.nav>li>a {
            color: #474747;
            text-transform: uppercase;
            padding: 30px;
        }

        nav.navbar.bootsnav ul.nav>li:hover {
            background: #f4f4f4;
        }

        .nav>li:after {
            content: "";
            width: 0;
            height: 5px;
            background: #34c9dd;
            position: absolute;
            bottom: 0;
            left: 0;
            transition: all 0.5s ease 0s;
        }

        .nav>li:hover:after {
            width: 100%;
        }

        nav.navbar.bootsnav ul.nav>li.dropdown>a.dropdown-toggle:after {
            content: "+";
            font-family: 'FontAwesome';
            font-size: 16px;
            font-weight: 500;
            position: absolute;
            top: 35%;
            right: 10%;
            transition: all 0.4s ease 0s;
        }

        nav.navbar.bootsnav ul.nav>li.dropdown.on>a.dropdown-toggle:after {
            content: "\f105";
            transform: rotate(90deg);
        }

        .dropdown-menu.multi-dropdown {
            position: absolute;
            left: -100% !important;
        }

        nav.navbar.bootsnav li.dropdown ul.dropdown-menu {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            border: none;
        }

        @media only screen and (max-width: 990px) {

            nav.navbar.bootsnav ul.nav>li.dropdown>a.dropdown-toggle:after,
            nav.navbar.bootsnav ul.nav>li.dropdown.on>a.dropdown-toggle:after {
                content: " ";
            }

            .dropdown-menu.multi-dropdown {
                left: 0 !important;
            }

            nav.navbar.bootsnav ul.nav>li:hover {
                background: transparent;
            }

            nav.navbar.bootsnav ul.nav>li>a {
                margin: 0;
            }
        }
    </style>
</head>

<body>
    <div class="art_home">

        <!--导航----------------------------------------------------------------------------------------------->
        <div class="art_home_pub_nav">
            <div class="art_home_nav" style="padding: 2em 0;">
                <div class="art_home_nav_logo"></div>
                <div class="container art_home_nav_main_list">
                    <div class="row">
                        <div class="col-md-12">
                            <nav class="navbar navbar-default navbar-mobile bootsnav">
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                                        data-target="#navbar-menu">
                                        <i class="fa fa-bars"></i>
                                    </button>
                                </div>
                                <div class="collapse navbar-collapse" id="navbar-menu">
                                    <ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">首页</a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">绘画艺术中心</a></li>
                                                <li><a href="#">绘画艺术逻辑</a></li>
                                                <li><a href="#">艺术专栏</a></li>
                                                <li><a href="#">让艺术学习不孤单</a></li>
                                                <li><a href="#">合作学术机构</a></li>
                                            </ul>
                                        </li>
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">课程</a>
                                            <ul class="dropdown-menu">
                                                <li class="dropdown">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">造型逻辑</a>
                                                    <ul class="dropdown-menu">
                                                        <li class="add_space">
                                                            <a href="#">审美</a>
                                                            <a href="#">空间</a>
                                                        </li>
                                                        <li class="add_space">
                                                            <a href="#">分型</a>
                                                            <a href="#">减法</a>
                                                        </li>
                                                        <li class="add_space">
                                                            <a href="#">肖像</a>
                                                            <a href="#">解剖</a>
                                                        </li>
                                                        <li class="add_space">
                                                            <a href="#">衣纹</a>
                                                            <a href="#">古典</a>
                                                        </li>
                                                        <li class="add_space">
                                                            <a href="#">现代</a>
                                                            <a href="#">色彩</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="dropdown">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">造型表现</a>
                                                    <ul class="dropdown-menu">
                                                        <li class="add_space">
                                                            <a href="#">审美</a>
                                                            <a href="#">空间</a>
                                                        </li>
                                                        <li class="add_space">
                                                            <a href="#">分型</a>
                                                            <a href="#">减法</a>
                                                        </li>
                                                        <li class="add_space">
                                                            <a href="#">肖像</a>
                                                            <a href="#">解剖</a>
                                                        </li>
                                                        <li class="add_space">
                                                            <a href="#">衣纹</a>
                                                            <a href="#">古典</a>
                                                        </li>
                                                        <li class="add_space">
                                                            <a href="#">现代</a>
                                                            <a href="#">色彩</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="dropdown">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">造型设计</a>
                                                    <ul class="dropdown-menu">
                                                        <li class="add_space">
                                                            <a href="#">审美</a>
                                                            <a href="#">空间</a>
                                                        </li>
                                                        <li class="add_space">
                                                            <a href="#">分型</a>
                                                            <a href="#">减法</a>
                                                        </li>
                                                        <li class="add_space">
                                                            <a href="#">肖像</a>
                                                            <a href="#">解剖</a>
                                                        </li>
                                                        <li class="add_space">
                                                            <a href="#">衣纹</a>
                                                            <a href="#">古典</a>
                                                        </li>
                                                        <li class="add_space">
                                                            <a href="#">现代</a>
                                                            <a href="#">色彩</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">会员</a>
                                            <ul class="dropdown-menu">
                                                <li class="dropdown">
                                                    <a href="#" class="dropdown-toggle"
                                                        data-toggle="dropdown">VIP会员成就</a>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#">学员风采</a></li>
                                                        <li><a href="#">学员作品</a></li>
                                                        <li><a href="#">师资力量</a></li>
                                                    </ul>
                                                </li>
                                                <li class="dropdown">
                                                    <a href="#" class="dropdown-toggle"
                                                        data-toggle="dropdown">高级会员服务</a>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#">素材服务</a></li>
                                                        <li><a href="#">教材服务</a></li>
                                                        <li><a href="#">软件服务</a></li>
                                                        <li><a href="#">硬件服务</a></li>
                                                        <li><a href="#">耗材服务</a></li>
                                                    </ul>
                                                </li>
                                                <li class="dropdown">
                                                    <a href="#" class="dropdown-toggle"
                                                        data-toggle="dropdown">免费会员服务</a>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#">造型逻辑公开课</a></li>
                                                        <li><a href="#">造型表现公开课</a></li>
                                                        <li><a href="#">造型设计公开课</a></li>
                                                        <li><a href="#">升级会员</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">交流</a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">艺术交流</a></li>
                                                <li><a href="#">艺术分享</a></li>
                                                <li><a href="#">艺术视频</a></li>
                                            </ul>
                                        </li>
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">关于</a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">企业简介</a></li>
                                                <li><a href="#">使命愿景</a></li>
                                                <li><a href="#">社会责任</a></li>
                                                <li><a href="#">团队简介</a></li>
                                                <li><a href="#">联系我们</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>
                <div class="art_home_nav_icon">
                    <span class="home_nav_icon_fa home_nav_icon_fa_lang">
                        <span class="home_nav_lang_ch">中文</span> | <span class="home_nav_lang_en">English</span>
                    </span>
                    <span class="home_nav_icon_fa home_nav_search_show_icon">
                        <i class="fa fa-search fa-lg"></i>
                    </span>
                    <span class="home_nav_icon_fa home_nav_icon_shopping_cart">
                        <i class="fa fa-shopping-cart fa-lg"></i>
                    </span>
                    <span class="home_nav_icon_fa  home_nav_icon_fa_align">
                        <i class="fa fa-align-left fa-lg"></i>
                    </span>
                </div>
            </div>

            <!--搜索------------------------------------------------------------------------------------------>
            <div class="art_home_search">
                <div class="art_home_search_content">
                    <div class="search_content_close">
                        <i class="fa fa-close home_nav_search_hide_icon"></i>
                    </div>
                    <p class="search_content_info">
                        Start typing and press Enter to search !
                    </p>
                    <div class="search_content_input">
                        <form class="search-form" role="search" action="https://draven.la-studioweb.com/" method="get">
                            <input autocomplete="off" name="s" type="text" class="search-field" placeholder="Search">
                            <button class="search-button" type="submit">
                                <i class="fa fa-search"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <!--购物车------------------------------------------------------------------------------------------>
            <div class="art_home_shopping_cart">
                <div class="art_home_shopping_cart_content">
                    <div class="art_home_shopping_cart_top">
                        <i class="fa fa-close fa-lg art_home_shopping_cart_close"></i>
                    </div>
                    <div class="art_home_shopping_cart_main">
                        <h3>购物车</h3>
                        <p>内容</p>
                    </div>
                </div>
            </div>
            <!--侧边栏------------------------------------------------------------------------------------------>
            <div class="art_home_right_side_bar">
                <div class="right_side_bar_content">
                    <div class="right_side_bar_top">
                        <i class="fa fa-close fa-lg right_side_bar_close"></i>
                    </div>
                    <div class="right_side_bar_main">
                        <h3>公司简介</h3>
                        <p>介绍内容</p>
                    </div>
                </div>
            </div>
        </div>


        <!--首页横幅----------------------------------------------------------------------------------------------->
        <div class="art_home_banner">
            <div class="shutter">
                <div class="shutter-img">
                    <a href="#" data-shutter-title="Digital Create Agency 01"><img
                            src="libs/dynamic_banner/images/m2-s1-1.jpg" alt="#"></a>
                    <a href="#" data-shutter-title="Intelligent Design"><img
                            src="libs/dynamic_banner/images/m2-s2-1.jpg" alt="#"></a>
                </div>
                <ul class="shutter-btn">
                    <li class="prev"></li>
                    <li class="next"></li>
                </ul>
                <div class="shutter-desc">
                    <p class="shutter_desc_txt">Digital Create Agency02</p>
                    <div class="bottom_right_img"></div>
                </div>
            </div>
        </div>

        <!--主体图文01----------------------------------------------------------------------------------------------->
        <div class="art_home_main_img_one">
            <div class="main_img_one_row">
                <div class="row">
                    <div class="col-md-5 main_img_one_col main_img_one_col_img"></div>
                    <div class="col-md-7 main_img_one_col main_img_one_col_txt">
                        <p class="main_img_one_title">在这里，可以让你的绘画变得更专业</p>
                        <p class="main_img_one_desc">Mauris a ante quis enim rhoncus mattis quis et nunc. Maecenas
                            auctor
                            tellus sit amet. Fusce a augue lorem. Morbi ut orci nec odio placerat viverra</p>
                        <p class="main_img_one_more pub_hover_btn">发现更多</p>
                    </div>
                </div>
            </div>
        </div>

        <!--主体图文02----------------------------------------------------------------------------------------------->
        <div class="art_home_main_img_two">
            <div class="main_img_two_row">
                <div class="row">
                    <div class="col-md-7 main_img_two_col main_img_two_col_txt">
                        <p class="main_img_two_title">在这里，可以让你的绘画变得更专业</p>
                        <p class="main_img_two_desc">Mauris a ante quis enim rhoncus mattis quis et nunc. Maecenas
                            auctor
                            tellus sit amet. Fusce a augue lorem. Morbi ut orci nec odio placerat viverra</p>
                        <p class="main_img_two_more pub_hover_btn">发现更多</p>
                    </div>
                    <div class="col-md-5 main_img_two_col main_img_two_col_img"></div>
                </div>
            </div>
        </div>

        <!--课程中心---------------------------------------------------------------------------------------------->
        <div class="art_home_main_class_center">
            <div class="class_center_title pub_title">
                <span class="class_center_title_txt">课程中心</span>
            </div>
            <ul class="class_center_nav ">
                <li class="class_center_nav_item class_center_nav_item_all">全部</li>
                <li class="class_center_nav_item class_center_nav_item_logic">造型逻辑</li>
                <li class="class_center_nav_item class_center_nav_item_view">造型表现</li>
                <li class="class_center_nav_item class_center_nav_item_design">造型设计</li>
            </ul>
            <div class="class_center_class_list">
                <div class="row">
                    <div class="col-md-3 class_item class_item_view">
                        <div class="class_item_content class_item_img_01">
                            <div class="class_item_img_pink">
                                <p class="item_img_pink_bottom">
                                    <span class="pink_bottom_txt">The Coffee Bar</span>
                                    <span class="pink_bottom_plus">
                                        <i class="fa fa-plus-circle fa-lg"></i>
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 class_item class_item_design">
                        <div class="class_item_content class_item_img_02">
                            <div class="class_item_img_pink">
                                <p class="item_img_pink_bottom">
                                    <span class="pink_bottom_txt">The Coffee Bar</span>
                                    <span class="pink_bottom_plus">
                                        <i class="fa fa-plus-circle fa-lg"></i>
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 class_item class_item_design">
                        <div class="class_item_content class_item_img_03">
                            <div class="class_item_img_pink">
                                <p class="item_img_pink_bottom">
                                    <span class="pink_bottom_txt">The Coffee Bar</span>
                                    <span class="pink_bottom_plus">
                                        <i class="fa fa-plus-circle fa-lg"></i>
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 class_item class_item_view">
                        <div class="class_item_content class_item_img_04">
                            <div class="class_item_img_pink">
                                <p class="item_img_pink_bottom">
                                    <span class="pink_bottom_txt">The Coffee Bar</span>
                                    <span class="pink_bottom_plus">
                                        <i class="fa fa-plus-circle fa-lg"></i>
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 class_item class_item_view">
                        <div class="class_item_content class_item_img_05">
                            <div class="class_item_img_pink">
                                <p class="item_img_pink_bottom">
                                    <span class="pink_bottom_txt">The Coffee Bar</span>
                                    <span class="pink_bottom_plus">
                                        <i class="fa fa-plus-circle fa-lg"></i>
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 class_item class_item_design">
                        <div class="class_item_content class_item_img_06">
                            <div class="class_item_img_pink">
                                <p class="item_img_pink_bottom">
                                    <span class="pink_bottom_txt">The Coffee Bar</span>
                                    <span class="pink_bottom_plus">
                                        <i class="fa fa-plus-circle fa-lg"></i>
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 class_item class_item_design">
                        <div class="class_item_content class_item_img_07">
                            <div class="class_item_img_pink">
                                <p class="item_img_pink_bottom">
                                    <span class="pink_bottom_txt">The Coffee Bar</span>
                                    <span class="pink_bottom_plus">
                                        <i class="fa fa-plus-circle fa-lg"></i>
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 class_item class_item_logic">
                        <div class="class_item_content class_item_img_08">
                            <div class="class_item_img_pink">
                                <p class="item_img_pink_bottom">
                                    <span class="pink_bottom_txt">The Coffee Bar</span>
                                    <span class="pink_bottom_plus">
                                        <i class="fa fa-plus-circle fa-lg"></i>
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="class_center_more">
                <p class="class_center_more_btn">更多课程 </p>
            </div>

        </div>

        <!--学员好评---------------------------------------------------------------------------------------------->
        <div class="art_home_students_comment">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <div class="carousel-caption">
                            <p class="carousel_txt">"I will give full marks to design, customizability and features. So
                                easy
                                to use and flexible
                                you don't need any support. Keep up the good work LA-Studio"</p>
                            <div class="carousel_customer">
                                <p class="carousel_customer_img"></p>
                                <p class="carousel_customer_title">Olivia Arribas</p>
                                <p class="carousel_customer_name">Louisville</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel-caption">
                            <p class="carousel_txt">"I will give full marks to design, customizability and features. So
                                easy
                                to use and flexible
                                you don't need any support. Keep up the good work LA-Studio"</p>
                            <div class="carousel_customer">
                                <p class="carousel_customer_img"></p>
                                <p class="carousel_customer_title">Olivia Arribas</p>
                                <p class="carousel_customer_name">Louisville</p>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>

        <!--宣传片---------------------------------------------------------------------------------------------->
        <div class="art_home_trailer">
            <video src="./images/video/painting_video_01.mp4" controls="controls" autoplay="autoplay"
                class="art_home_trailer_video" />
        </div>

        <!--会员介绍---------------------------------------------------------------------------------------------->
        <div class="art_home_member_intro">
            <div class="art_home_member_intro_content">
                <div class="row">
                    <div class="col-md-6 intro_content_txt">
                        <p class="title">Fully Responsive & Powerful Web Builder</p>
                        <p class="desc">Fusce a augue lorem. Morbi ut orci nec odio placerat viverra. Mauris rhoncus
                            purus
                            vel orci
                            posuere.</p>
                    </div>
                    <div class="col-md-6 intro_content_img">
                        <div class="intro_content_img_01"></div>
                        <div class="intro_content_img_02"></div>
                    </div>
                </div>
            </div>
        </div>

        <!--老师介绍---------------------------------------------------------------------------------------------->
        <div class="art_home_teacher_intro">
            <div class="teacher_intro_content">
                <div class="row">
                    <div class="col-md-6 col_box left_box">
                        <div class="left_box_all">
                            <p class="teacher_intro_content_title">老师介绍</p>
                            <p class="teacher_intro_content_desc">Fusce a augue lorem. Morbi ut orci nec odio placerat
                                viverra.
                                Mauris rhoncus purus vel orci
                                posuere.</p>
                            <p class="teacher_intro_content_join">加入我们</p>
                        </div>
                    </div>
                    <div class="col-md-6 col_box right_box">
                        <div class="row teacher_list">
                            <div class="col-md-6 teacher_item_box ">
                                <div class=" teacher_item teacher_item_img_01">
                                    <div class="class_item_img_pink">
                                        <p class="item_img_pink_bottom">
                                            <span class="pink_bottom_txt">Rose</span>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 teacher_item_box">
                                <div class=" teacher_item teacher_item_img_02">
                                    <div class="class_item_img_pink">
                                        <p class="item_img_pink_bottom">
                                            <span class="pink_bottom_txt">Jack</span>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 teacher_item_box ">
                                <div class=" teacher_item teacher_item_img_03">
                                    <div class="class_item_img_pink">
                                        <p class="item_img_pink_bottom">
                                            <span class="pink_bottom_txt">Lucy</span>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 teacher_item_box ">
                                <div class=" teacher_item teacher_item_img_04">
                                    <div class="class_item_img_pink">
                                        <p class="item_img_pink_bottom">
                                            <span class="pink_bottom_txt">Tomas</span>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--绘画艺术逻辑---------------------------------------------------------------------------------------------->
        <div class="art_home_art_logic">
            <div class="art_home_art_logic_content">
                <div class="logic_content_title pub_title">
                    绘画艺术逻辑
                </div>
                <div class="logic_content_list">
                    <div class="row">
                        <div class="col-md-4 logic_item">
                            <div class=" logic_item_box">
                                <p class="logic_img logic_img_01"></p>
                                <p class="logic_title">Untangling wicked digital problems</p>
                                <p class="logic_desc">All the rumors have finally died down and many skeptics have
                                    tightened
                                    their lips, the iPod does support video format…</p>
                                <p class="logic_btn">Read More</p>
                            </div>
                        </div>
                        <div class="col-md-4 logic_item">
                            <div class=" logic_item_box">
                                <p class="logic_img logic_img_02"></p>
                                <p class="logic_title">Untangling wicked digital problems</p>
                                <p class="logic_desc">All the rumors have finally died down and many skeptics have
                                    tightened
                                    their lips, the iPod does support video format…</p>
                                <p class="logic_btn">Read More</p>
                            </div>
                        </div>

                        <div class="col-md-4 logic_item">
                            <div class=" logic_item_box">
                                <p class="logic_img logic_img_03"></p>
                                <p class="logic_title">Untangling wicked digital problems</p>
                                <p class="logic_desc">All the rumors have finally died down and many skeptics have
                                    tightened
                                    their lips, the iPod does support video format…</p>
                                <p class="logic_btn">Read More</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--合作学术机构---------------------------------------------------------------------------------------------->
        <div class="art_home_cooperator">
            <ul class="art_home_cooperator_content">
                <li class="cooperator_img cooperator_img_01"></li>
                <li class="cooperator_img cooperator_img_02"></li>
                <li class="cooperator_img cooperator_img_03"></li>
                <li class="cooperator_img cooperator_img_04"></li>
                <li class="cooperator_img cooperator_img_05"></li>
                <li class="cooperator_img cooperator_img_06"></li>
            </ul>
        </div>


        <!--让艺术学习不孤单---------------------------------------------------------------------------------------------->
        <div class="art_home_happy">
            <div class="art_home_happy_title pub_title">
                让艺术学习不孤单
            </div>
            <div class="art_home_happy_desc">
                描述性的文字
            </div>
            <div class="art_home_happy_content">
                <video src="./images/video/painting_video_02.mp4" controls="controls" autoplay="autoplay"
                    class="art_home_happy_content_video" />
            </div>
        </div>

        <!--页脚---------------------------------------------------------------------------------------------->
        <div class="art_home_footer">
            <div class="art_home_footer_content">
                <div class="art_home_footer_content_logo">

                </div>
            </div>
        </div>


        <!--联系方式----------------------------------------------------------------------------------------------->
        <div class="art_home_contact">
            <ul class="art_home_contact_ul">
                <li class="art_home_contact_li">
                    <i class="fa fa-comments-o fa-lg art_home_contact_li_chat"></i>
                </li>
                <li class="art_home_contact_li">
                    <i class="fa fa-phone fa-lg art_home_contact_li_phone"></i>
                </li>
                <li class="art_home_contact_li">
                    <i class="fa fa-envelope-o  fa-lg art_home_contact_li_email"></i>
                </li>
            </ul>
        </div>

    </div>
    <!--导航----------------------------------------------------------------------------------------------->
    <script src="libs/top_nav/js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="libs/top_nav/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="libs/top_nav/js/bootsnav.js"></script>
    <script type='application/javascript' src='libs/fastclick.js'></script>

    <!--首页横幅----------------------------------------------------------------------------------------------->
    <script src="libs/dynamic_banner/js/jquery.min.js"></script>
    <script src="libs/dynamic_banner/js/velocity.js"></script>
    <script src="libs/dynamic_banner/js/shutter.js"></script>
    <script>
        $(function () {
            /*首页横幅-below******************************************************************/
            $('.shutter').shutter({
                shutterW: 1920, // 容器宽度
                shutterH: 850, // 容器高度
                isAutoPlay: true, // 是否自动播放
                playInterval: 5000, // 自动播放时间
                curDisplay: 1, // 当前显示页
                fullPage: true // 是否全屏展示
            });
            /*首页横幅-above******************************************************************/


            /*导航模块-below******************************************************************/
            FastClick.attach(document.body);


            //搜索
            $('.home_nav_search_show_icon').bind('click', function () {
                console.log('click-01');
                $('.art_home_search').css({ opacity: '1', visibility: 'visible' })
            });
            $('.home_nav_search_show_icon').bind('touchend', function () {
                console.log('touchend-01');
                $('.art_home_search').css({ opacity: '1', visibility: 'visible' })
            });


            $('.home_nav_search_hide_icon').bind('click', function () {
                console.log('click-02');
                $('.art_home_search').css({ opacity: '0', visibility: 'hidden' })
            });
            $('.home_nav_search_hide_icon').bind('touchend', function () {
                console.log('touchend-02');
                $('.art_home_search').css({ opacity: '0', visibility: 'hidden' })
            });


            //购物车
            $('.home_nav_icon_shopping_cart').bind('click', function () {
                console.log('click-03');
                $('.art_home_shopping_cart').css({ right: '0' })
            });
            $('.home_nav_icon_shopping_cart').bind('touchend', function () {
                console.log('touchend-03');
                $('.art_home_shopping_cart').css({ right: '0' })
            });

            $('.art_home_shopping_cart_close').bind('click', function () {
                console.log('click-04');
                $('.art_home_shopping_cart').css({ right: '-360px' })
            });

            $('.art_home_shopping_cart_close').bind('touchend', function () {
                console.log('touchend-04');
                $('.art_home_shopping_cart').css({ right: '-360px' })
            });


            //公司简介
            $('.home_nav_icon_fa_align').bind('click', function () {
                $('.art_home_right_side_bar').css({ right: '0' })
            });

            $('.right_side_bar_close').bind('click', function () {
                $('.art_home_right_side_bar').css({ right: '-360px' })
            });

            /*导航模块-above******************************************************************/


            /*课程中心-below*****************************************************************/
            $('.class_center_nav_item_all').bind('click', function () {
                $('.class_center_nav_item').css({ color: '#333' });
                $(this).css({ color: '#f53e6a' });
                $('.class_item').css({ visibility: 'visible' });
            });
            $('.class_center_nav_item_logic').bind('click', function () {
                $('.class_center_nav_item').css({ color: '#333' });
                $(this).css({ color: '#f53e6a' });
                $('.class_item').css({ visibility: 'visible' });
                $('.class_item_logic').css({ visibility: 'hidden' });
            });
            $('.class_center_nav_item_view').bind('click', function () {
                $('.class_center_nav_item').css({ color: '#333' });
                $(this).css({ color: '#f53e6a' });
                $('.class_item').css({ visibility: 'visible' });
                $('.class_item_view').css({ visibility: 'hidden' });
            });
            $('.class_center_nav_item_design').bind('click', function () {
                $('.class_center_nav_item').css({ color: '#333' });
                $(this).css({ color: '#f53e6a' });
                $('.class_item').css({ visibility: 'visible' });
                $('.class_item_design').css({ visibility: 'hidden' });
            })
            /*课程中心-above*****************************************************************/

        });
    </script>


</body>

</html>